<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>客户列表</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<script type="text/html" id="barDemo">
    <input type="button" value="编辑" lay-event="upd"   class="layui-btn layui-btn-sm">
    <input type="button" value="删除" lay-event="del"  class="layui-btn layui-btn-sm layui-btn-danger">
</script>
<script type="text/html" id="bar">

</script>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>客户列表</legend>
</fieldset>

<form class="layui-form">
    <div class="layui-inline">
        <label class="layui-form-label">客户名称:</label>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input  style="width: auto;" value="" type="text" id="cusName" name="cusName" lay-verify="title"
                        autocomplete="off" placeholder="请输入客户名称" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-inline">
                <button type="button" class="layui-btn layui-btn-normal" id="find" data-type="reload" lay-submit=""lay-filter="find"><i class="layui-icon">&#xe615;</i></button>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input value="添加客户" name="add" type="button" onclick="addCustomer()" class="layui-btn-normal layui-btn">
            </div>
        </div>
    </div>
</form>

<div class="layui-container" >
    <div class="layui-tab-item layui-show">
        <table class="layui-table" id="test" lay-filter="test">
        </table>
    </div>
</div>
<script src="lib/jquery-3.4.1.min.js"></script>
<script src="lib/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;

        layui.use(['table','form'], function () {
            var table = layui.table;
            //表格渲染
            var tableIns = table.render({
                elem: '#test'
                , url: 'jay/Customer/showCustomers' //数据接口
                ,parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": "", //解析提示文本
                        "count": res.obj.total, //解析数据长度
                        "data": res.obj.list //解析数据列表，解析返回数据里面的数组对象
                    }
                }
                ,toolbar:'#bar'
                ,defaultToolBar:['default','print','export']
                , cols: [[ //表头
                    { field: 'id', title: '序号', align: 'center', width: 80, sort: true, fixed: 'left' }
                    , { field: 'cusName', title: '客户真实姓名', align: 'center',width: 140}
                    , { field: 'address', title: '地址',align: 'center', width: 300 }
                    , { field: 'phone', title: '电话号码', align: 'center',width: 160}
                    , { fixed: '', title: '操作',align: 'center', toolbar: '#barDemo' }
                ]],
                id: 'testReload',
                limit:10,
                even: true, //隔行背景
                event: true,
                page: true//开启分页
            });
            var $ = layui.$,active={
                reload:function(){
                    var cusName = $('#cusName').val();
                    table.reload('testReload',{
                        page:{
                            curr:1//默认从第一页开始加载
                        },
                        where:{
                            cusName:cusName
                        }
                    });
                }
            }
            $('#find').on('click', function(){
                var type = 'reload';
                active[type] ? active[type].call(this) : '';
            });
            table.on('tool(test)',function(obj){
                var layer = layui.layer;
                var data = obj.data;
                if(obj.event=='upd'){
                    layer.open({
                        type:2,
                        title : '修改客户信息',
                        area : ['500px','400px'],
                        content : 'updCustomer.html',
                        maxmin : true,
                        shadeClose :true,
                        btn:['取消'],
                        success:function (layero, index) {
                            var body = layer.getChildFrame('body',index);
                            body.contents().find('#cusName').val(data.cusName);
                            body.contents().find('#address').val(data.address);
                            body.contents().find('#phone').val(data.phone);
                            body.contents().find('#cId').val(data.id);
                        }
                    })
                }else if(obj.event=='del'){
                    layer.confirm("确认要删除吗?",{btn:["确认","取消"]},
                        function(){
                            $.ajax({
                                url:'jay/Customer/deleteCustomer',
                                data:'id='+data.id,
                                success:function (res) {
                                    if(res.obj!=null){
                                        layer.msg("删除成功",{icon:1});
                                        table.reload('testReload',{
                                                page:{
                                                    curr:1
                                                }
                                            }
                                        );
                                    }else{
                                        layer.msg("删除失败，请稍后再试!",{icon:2});
                                    }
                                }
                            });
                        },function(){
                            layer.msg("您取消了操作",{icon:2});
                        })
                }
            })

        });
    });
    function addCustomer(){
        layui.use('layer', function(){
            var layer = layui.layer;

            layer.open({
                type:2,
                area: ['500px','400px'],
                title:'添加客户',
                content:'addCustomer.html'
            });
        });
    }
</script>
</body>
</html>